<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>图片滑动展示</title>
    <style type="text/css">
        html {
            font-family: "microsoft yahei,arial, helvetica, sans-serif";
            font-size: 16px;
            background-image: url('../images/10.jpg');
            /* 设置背景图片 */
            background-size: cover;
            /* 覆盖整个页面 */
            background-position: center;
            /* 居中显示 */
            background-attachment: fixed;
            /* 固定背景，不随滚动条滚动 */
        }

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        .auto {
            margin: 0 auto;
        }

        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        /* 网页样式 */
        .top1 {
            height: 60px;
            background-color: rgb(200, 16, 16);
        }

        .top1 li {
            width: 150px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            float: left;
        }

        .top1 li a {
            color: #fff;
            display: block;
        }

        .top1 li a:hover {
            color: gold;
            font-weight: 700;
        }
        .top1 li a.active {
          color: gold;
          font-size: 20px;
          background-color: #ff6c6c;
          font-weight: 700;
        }
        /*  */
        #slide {
            width: 800px;
            height: 120px;
            /* 稍微增加高度以容纳描述 */
            margin: 0 auto;
            margin-top: 100px;
            /* border: 1px solid black; */
            overflow: hidden;
        }

        #content {
            width: 999999px;
        }

        .item {
            width: 160px;
            height: 120px;
            float: left;
            margin-right: 10px;
            cursor: pointer;
            text-align: center;
            /* 居中对齐 */
        }

        .item img {
            width: 160px;
            height: 100px;
            display: block;
            /* 确保图片独占一行 */
        }

        .item .description {
            font-size: 12px;
            color: #333;
            margin-top: 5px;
            /* 与图片之间留点空间 */
        }

        #button {
            width: 100px;
            margin: 40px auto;
        }

        .text-container {
            width: 60%;
            margin: 0 auto;
            padding: 40px;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            font-family: 'Open Sans', sans-serif;
            font-size: 16px;
            line-height: 1.6;
            color: #333;
        }

        .text-container h2 {
            margin-top: 0;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }

        .item-container {
            display: flex;
            /* 使用Flexbox布局 */
            align-items: center;
            /* 垂直居中对齐 */
            margin-bottom: 30px;
            /* 每个组合之间的间隔 */
        }

        .image-container {
            width: 200px;
            /* 固定图片宽度 */
            margin-right: 20px;
            /* 图片与文字之间的间距 */
        }

        .image-container img {
            max-width: 100%;
            /* 图片宽度不超过容器宽度 */
            height: auto;
            /* 保持图片比例 */
        }

        .text-description {
            flex-grow: 1;
            /* 文字部分占用剩余空间 */
        }
           .sidebar {
            z-index: 3;
            position: fixed;
            top: 0;
            left: 0;
            width: 70px;
            /* 初始宽度 */
            margin-top: 60px;
            background-color: rgba(225, 157, 157, 0.5);
            color: #fff;
            text-align: center;
            padding-top: 200px;
            cursor: pointer;
            height: 350px;
            transition: width 0.5s;
        }

        .chakan {
            color: #fff;
        }

        .chakan:hover {
            background-color: gold;
            color: #000;
            font-weight: 700;
        }

        .sidebar:hover {
            width: 150px;
            /* 悬浮时的宽度 */
        }

        .sidebar li a {
            display: block;
            margin-bottom: 10px;
            opacity: 0;
            color: #fff;
            transition: opacity 0.5s;
        }

        .sidebar:hover li a {
            opacity: 1;
            /* 悬浮在侧边栏时，内容出现 */
        }

        .sidebar li a:hover {
            opacity: 1;
            color: #000;
            font-weight: 700;
            background-color: gold;
        }
    </style>
    <script>
        window.onload = function() {
        const navLinks = document.querySelectorAll('.top1 li a');
          // 为每个导航链接添加点击事件
          navLinks.forEach(link => {
            link.addEventListener('click', function() {
              // 移除所有链接的高亮样式      
              navLinks.forEach(link => {    
                link.classList.remove('active');    
              });   
              // 给当前点击的链接添加高亮样式   
              this.classList.add('active');  
            });  
          });
          navLinks[3].classList.add('active');
        }
      </script>
</head>

<body>
    <ul class="top1 auto clearfix">
        <li><a href="../index.html">首页</a></li>
        <li><a href="../part1/partone.html">鸦片战争</a></li>
        <li><a href="../part2/parttwo.html">辛亥革命</a></li>
        <li><a href="partthree.html">五四运动</a></li>
        <li><a href="../part4/Anti-JapaneseWar.html">抗日战争</a></li>
        <li><a href="../part5/partfive.html">中华人民共和国成立</a></li>
        <li style="float: right;"><a href="../part0/message.html">留言</a></li>
    </ul>
<div class="sidebar">

    <ul class="sidebar">
        <p class="chakan">查看更多</p>
        <li><a href="content1.html">相关人物</a></li>
        <li><a href="content2.html">五四运动的详细介绍</a></li>
    </ul>
</div>

    <div id="slide">
        <div id="content">
            <div class="item">
            <a href="#section2"><img src="../images/311.jpg" /></a>
                <div class="description">陈独秀</div>
            </div>
            <div class="item">
                <a href="#section2"><img src="../images/312.jpg" /></a>
                <div class="description">李大钊</div>
            </div>
            <div class="item">
                <a href="#section3"><img src="../images/313.jpeg" /></a>
                <div class="description">胡适</div>
            </div>
            <div class="item">
                <a href="#section4"><img src="../images/314.webp" /></a>
                <div class="description">鲁迅</div>
            </div>
            <div class="item">
                <a href="#section5"><img src="../images/315.jpg" /></a>
                <div class="description">罗家伦</div>
            </div>
        </div>
    </div>
    
    <div id="button">
        <button type="button" id="left">向左</button>
        <button type="button" id="right">向右</button>
    </div>
    <div class="text-container">
        <section id="section1">
            <div class="item-container">
                <div class="image-container"><img src="../images/311.jpg" alt=""></div>
                <div class="text-description">
                    <h2>陈独秀</h2>
                    <p>生平：<br>
                        陈独秀，字仲甫，号独秀，安徽怀宁人。早年留学日本，接触到西方思想和文化。回国后，他积极推动新文化运动，成为思想界的领军人物。<br>
                    贡献：<br>
                    《新青年》：创办并主编《新青年》杂志，推动新文化运动，提倡民主与科学，反对封建思想和礼教。<br>
                    思想启蒙：通过杂志发表大量文章，倡导白话文运动，推动文学革命，对青年学生的思想启蒙起到了重要作用。<br>
                    政治活动：参与并推动中国共产党的创立，是中国共产党早期的主要领导人之一。</p>
                </div>
            </div>
        </section>

        <section id="section2">
            <div class="item-container">
                <div class="image-container"><img src="../images/312.jpg" alt=""></div>
                <div class="text-description">
                    <h2>李大钊</h2>
                    <p>
                        生平：<br>李大钊，字守常，河北乐亭人。早年留学日本，接触到马克思主义思想。回国后，在北京大学任教，积极参与新文化运动。<br>
                        贡献：<br>
                        马克思主义传播：李大钊是中国最早的马克思主义传播者之一，通过文章和演讲，介绍和宣传马克思主义思想。<br>
                        思想启蒙：在北京大学任教期间，培养了一批有志青年，对五四运动的思想准备起到了重要作用。<br>
                        政治活动：积极参与中国共产党的创立，是中国共产党早期的主要领导人之一，后因政治活动被捕并牺牲。
                    </p>
                </div>
            </div>
        </section>

        <section id="section3">
            <div class="item-container">
                <div class="image-container"><img src="../images/313.jpeg" alt=""></div>
                <div class="text-description">
                    <h2>胡适</h2>
                    <p>
                        生平：<br>胡适，字适之，安徽绩溪人。早年留学美国，获得哥伦比亚大学哲学博士学位。回国后，在北京大学任教，成为新文化运动的代表人物之一。<br>
                        贡献：<br>
                        白话文运动：主张用白话文代替文言文，推动文学革命，对新文化运动的影响深远。<br>
                        学术影响：在哲学、文学、历史等领域有重要贡献，提倡实用主义，对现代中国学术界有深远影响。<br>
                        文化传播：通过文章和演讲，推广西方文化和思想，对青年学生的思想启蒙起到了重要作用。
                    </p>
                </div>
            </div>
        </section>

        <section id="section4">
            <div class="item-container">
                <div class="image-container"><img src="../images/314.webp" alt=""></div>
                <div class="text-description">
                    <h2>鲁迅</h2>
                    <p>
                        生平：<br>鲁迅，原名周树人，字豫才，浙江绍兴人。早年留学日本，学习医学，后转向文学创作。成为中国现代文学的奠基人之一。<br>
                        贡献：<br>
                        文学创作：通过小说、杂文等文学形式，批判旧社会的黑暗和封建礼教，倡导新文化，对五四运动的思想解放有重要影响。<br>
                        思想启蒙：通过文学作品，激发青年学生的爱国热情和反抗精神，成为新文化运动的重要思想领袖。<br>
                        文化影响：鲁迅的文学作品和思想对现代中国文学和文化产生了深远影响，被誉为“民族魂”。
                    </p>
                </div>
            </div>
        </section>

        <section id="section5">
            <div class="item-container">
                <div class="image-container"><img src="../images/315.jpg" alt=""></div>
                <div class="text-description">
                    <h2>罗家伦</h2>
                    <p>生平：<br>罗家伦，字志希，江西吉安人。毕业于北京大学，曾任北京大学学生会主席。五四运动期间，罗家伦是学生运动的领袖之一。<br>
                    贡献：<br>
                    组织领导：积极参与和组织学生抗议活动，发表演讲，撰写文章，推动爱国运动的发展。<br>
                    政治活动：五四运动后，罗家伦继续参与政治活动，后来成为中国国民党的重要成员，致力于国家建设。<br>
                    教育事业：罗家伦后来在教育领域也有重要贡献，曾任清华大学校长，推动教育改革。</p>
                </div>
            </div>
        </section>

    </div>
    <script >
   
     function smoothScroll(target, duration) {
            var targetElement = document.querySelector(target);
            var targetPosition = targetElement.getBoundingClientRect().top;
            var startPosition = window.pageYOffset;
            var distance = targetPosition - startPosition;
            var startTime = null;

            function animation(currentTime) {
                if (startTime === null) startTime = currentTime;
                var timeElapsed = currentTime - startTime;
                var run = ease(timeElapsed, startPosition, distance, duration);
                window.scrollTo(0, run);
                if (timeElapsed < duration) requestAnimationFrame(animation);
            }

            function ease(t, b, c, d) {
                t /= d / 2;
                if (t < 1) return c / 2 * t * t + b;
                t--;
                return -c / 2 * (t * (t - 2) - 1) + b;
            }

            requestAnimationFrame(animation);
        }

        document.querySelectorAll('nav a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                smoothScroll(this.getAttribute('href'), 800); // 800ms duration
            });
        });
        var content = document.getElementById("content");
        var left = document.getElementById("left");
        var right = document.getElementById("right");
        content.style.marginLeft = 0 + "px";
        content.innerHTML = content.innerHTML + content.innerHTML + content.innerHTML;
        var key = "run";
        var dkey = "left";
        left.onclick = function () {
            dkey = "left";
        }
        right.onclick = function () {
            dkey = "right";
        }
        content.onmouseenter = function () {
            key = "stop";
        }
        content.onmouseleave = function () {
            key = "run";
        }
        dd();
        function dd() {
            var num = parseFloat(content.style.marginLeft);
            if (key == "run") {
                if (dkey == "left") {
                    num -= 0.5;
                    if (num <= -170 * 5) {
                        num = 0;
                    }
                } else {
                    num += 0.5;
                    if (num >= 0) {
                        num = -170 * 5;
                    }
                }
            }
            content.style.marginLeft = num + "px";
            setTimeout("dd()", 13);
        }//图片滚动
    </script>
</body>

</html>